<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>starwars</title>

    <style>
    /* css reset 重置页面样式 */
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-color: #000000;
    }
    img{
        width: 100%;
    }
    .starwars-demo{
        height: 17em;
        width: 34em;
        position: absolute;
        top: 53%;
        left: 50%;
        /* background-color: red; */
        transform: translate(-50%,-50%);
        /* 先写perspective再写transform-style */
        perspective: 800px;
        transform-style: preserve-3d;
        
    }
    .star,.wars,.byline{
        position: absolute;
    }
    .star {
        top: -0.75em;
        /* 动作导演 */
        animation: shipmove 10s infinite;
    }
    .wars {
        bottom: -0.5em;
        /* 动作导演 */
        animation: shipmove 10s infinite;
    }
    @keyframes shipmove{
        0%{
            opacity: 0;
            transform: scale(1.5);
        }
        20%{
            opacity: 1;
            
        }
        89%{
            opacity: 1;
            transform: scale(1);
        }
        100%{
            opacity: 0;
            transform: translateZ(-400em);
        }
    }

    .byline {
        color: #ffffff;
        font-family: Lato;
        font-size: 2.25em;
        left: 2em;
        /* 文字的间距 */
        letter-spacing: 0.4em;
        right: -2em;
        top: 29%;
        text-transform: uppercase;
        /* linear 线性渐变 */
        animation: move-byline 10s linear infinite;
    }

    .byline span{
        /* 行内块级元素 */
        display: inline-block;
        /* 每个文字的单独效果 */
        animation: span-letters 10s linear infinite;
    }
    @keyframes span-letters{
        0%,100%{
            opacity: 0;
            /* 正值为顺时针，负值为逆时针 */
            transform: rotateY(90deg);
        };
        30%{
            opacity: 1;
        }
        70%,80%{
            transform: rotateY(0);
            opacity: 1;
        }
        88%,100%{
            opacity: 0;
        }
        
    }
    @keyframes move-byline{

        0%{
            /* em表示字体大小的倍数  */
            transform: translateZ(5em);
        };
        100%{
            transform: translateZ(8em);
        };
    }
    </style>

</head>
<body>
    /* <!-- 最原始的 -->
    <!-- <div class="starwars">
        <img src="./images/star.svg" class="star">
        <img src="./images/wars.svg" class="wars">
        
    </div> -->

    <!-- div.starwars-demo -->
    <!-- <div class="starwars-demo">
        <img src="./images/star.svg" alt="" class="star">
        <img src="./images/wars.svg" alt="" class="wars">
    </div> -->

    <!-- .starwars-demo>img.star*2 -->
    <!-- <div class="starwars-demo">
        <img src="./images/star.svg" alt="" class="star">
        <img src="./images/wars.svg" alt="" class="star">
    </div> -->

    <!-- amit基于css的快速输入的插件。 -->

    <!-- >是父子选择器 -->
    <!-- []是css中的属性选择器 -->
    <!-- .starwars-demo>img.star[src="./images/.svg"]*2 -->
    <!-- <div class="starwars-demo">
        <img src="./images/.svg" alt="" class="star">
        <img src="./images/.svg" alt="" class="star">
    </div> --> */
    
    <div class="starwars-demo">
        <img src="./images/star.svg" alt="" class="star"><img src="./images/wars.svg" alt="" class="wars">
        <h2 class="byline">
            <span>T</span>
            <span>h</span>
            <span>e</span>
            <span>F</span>
            <span>o</span>
            <span>r</span>
            <span>c</span>
            <span>e</span>
            <span>A</span>
            <span>w</span>
            <span>a</span>
            <span>k</span>
            <span>e</span>
            <span>n</span>
            <span>s</span>
        </h2>
    </div>
</body>
</html>